<template>
  <div class="header">
    <!-- 头部上面 -->
    <div class="header-top">
      <span
        >尚品汇欢迎您！
        <span
          >请
          <router-link to="/Login" class="header-user-login">登录</router-link>
          <router-link to="/Register">免费注册</router-link>
        </span>
      </span>

      <ul class="header-nav">
        <li><a>我的订单</a></li>
        <li><a>我的购物车</a></li>
        <li><a>我的尚品汇</a></li>
        <li><a>尚品汇会员</a></li>
        <li><a>企业采购</a></li>
        <li><a>关注尚品汇</a></li>
        <li><a>合作招商</a></li>
        <li><a>商家后台</a></li>
      </ul>
    </div>
    <!-- 头部搜索栏 -->
    <div class="header-bottom">
      <a href="">
        <img src="./logo.png" />
      </a>
      <form action="" class="header-search" @submit.prevent="goSearch">
        <input type="text" v-model="keyword" />
        <button type="submit">搜索</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Footer",
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    goSearch() {
      console.log(1111);
      // 可选params参数，不允许参数为空
      // 要么有参数，要么没有参数
      const { keyword } = this;
      const location = {
        name: "Search",
        // 携带query参数
        query: this.$route.query,
      };
      if (keyword) {
        location.params = { keyword };
      }
      this.$router.push(location);
    },
  },
  // watch: {
  //   // 监视浏览器上路由地址的变化，一旦发生变化就重新发送search请求
  //   $route:{
  //     handler: "goSearch",
  //     immediate: true,
  //   }
  // }

  // watch: {
  //   "$route.path": function (newVal, oldVal) {
  //     console.log(newVal + "----" + oldVal);
  //     this.goSearch();
  //   },
  // },
};
</script>

<style lang="less" scoped>
.header {
  height: 100px;
  //   background-color: aqua;
}
a {
  color: #000;
}
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  background: #eaeaea;
  padding: 0 20px;
}
.header-user-login {
  border-right: 1px solid #000;
  padding-right: 5px;
  margin-right: 5px;
}
.header-nav {
  display: flex;
  li {
    border-right: 1px solid #000;
    padding-right: 10px;
    margin-right: 10px;
    &:last-child {
      border-right: none;
      padding-right: 0;
      margin-right: 0;
    }
  }
}
.header-bottom {
  display: flex;
  justify-content: space-between;
  height: 70px;
  padding: 0 20px;
  align-items: center;
}
.header-search {
  display: flex;
  align-items: center;
  input {
    width: 500px;
    height: 35px;
    border: 1px solid red;
    outline: none;
    font-size: 18px;
    padding: 0 10px;
  }
  button {
    width: 80px;
    height: 37px;
    background-color: red;
    color: #fff;
    outline: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
  }
}
</style>